<template>
    <div>
        <Card shadow :padding="16">
            <div class="search-con">
                <Input placeholder="用户名" class="search-input" name="userName" v-model="userName"></Input>
                <Button ref="demo"  type="primary" @click="showInfo">{{$t('query')}}</Button>
                <Button type="success" @click="modal1 = true">{{$t('add')}}</Button>
                <ColPopTip :list="columns1" @setColumn="setColumn"></ColPopTip>
            </div>
            <Table ref="LT" row-key="id" :loading="loading" :height="tableHeight" stripe border :columns="filterColumns" :data="list" @on-select="select">
                <template slot-scope="{ row }" slot="access">
                    <Tag v-for="(item) in row.access" color="blue" v-bind:key="$uuid.v1()">{{ $t(item) }}</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">{{$t('edit')}}</Button>
                    <Button type="error" size="small" @click="remove(index)">{{$t('delete')}}</Button>
                </template>
            </Table>
            <div style="margin-top: 10px;text-align: right">
                <Page :page-size-opts="[10,20,50,100]" :total="total" @on-change="pageChange" @on-page-size-change="pageSizeChange" size="small" show-elevator show-sizer show-total />
            </div>
        </Card>

        <modal v-model="modal1" :mask-closable="false" title="详情页面">
            <Form>
                <row>
                    <FormItem label="Name" prop="name">
                        <Input placeholder="Enter your name" style="width: 100px;"></Input>
                    </FormItem>
                    <FormItem label="Name2" prop="name2">
                        <Input placeholder="Enter your name" style="width: 100px;"></Input>
                    </FormItem>
                </row>
                <FormItem label="Nam3e" prop="name3">
                    <Input placeholder="Enter your name" style="width: 200px;"></Input>
                </FormItem>
            </Form>
        </modal>
    </div>
</template>




<script>
    import DetailModal from "../../components/detail-modal";
    import ColPopTip from '../../components/col-poptip'
    import { mixin } from '../../mixins/mixin'

    export default {
        name: "sys-menu",
        mixins: [mixin],
        components: {DetailModal,ColPopTip},
        data () {
            return {
                modal1: false,
                queryUrl: 'getMenuData',
                userName: ''
            }
        },
        methods:{
            showInfo(){

            },
            ok(){

            },
            show(index,row){
            }
        },
        computed : {
            columns1() {
                return [
                    {type: 'selection', width: 60, align: 'center'},
                    {title: this.$t('menu_name'), key: 'name',tree: true},
                    {title: this.$t('menu_url'), key: 'url'},
                    {title: this.$t('menu_icon'), key: 'icon'},
                    {title: this.$t('menu_access'), slot:'access', key: 'access'},
                    {title: this.$t('menu_sort'), key: 'sort'},
                    {title: this.$t('remark'), key: 'remark'},
                    {title: this.$t('updateId'), key: 'updateId'},
                    {title: this.$t('createTime'), key: 'createTime', minWidth: 180},
                    {title: this.$t('action'), slot: 'action', width: 150, align: 'center'}
                ]
            }
        },
        mounted() {
        }
    }
</script>

<style lang="less">

    /*.ivu-modal-body{*/
    /*    height: 400px;*/
    /*    overflow: auto;*/
    /*}*/

</style>